<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
// import "@/modules/map";
// import "echarts/map/js/china.js";
import fontSize from "@/modules/fontSize";
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => ({ allRate: "", baifenbi: "" }),
    },
    width: {
      type: String | Number,
      default: () => 1,
    },
    titleTop: {
      type: String | Number,
      default: "40%",
    },
    subtext: {
      type: String | Number,
    },
     subtextStyleSize: {
      type: Number,
      default: 0.085,
    },
    img: {
      // 图片地址
      type: Object,
      default: () => ({
        url: require("@/assets/images/echarts/jishiqi.png"),
        width: 11,
      }),
    },
  },
  watch: {
    width: "drawLine",
    data: "drawLine",
       subtext: "drawLine",
        subtextStyleSize: "drawLine",
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var labelData = [];
        var labelData1 = [];
        for (var i = 0; i < 150; ++i) {
          labelData.push({
            value: 1,
            name: i,
            itemStyle: {
              normal: {
                color: "rgba(0,209,228,0)",
              },
            },
          });
        }
        for (var i = 0; i < labelData.length; ++i) {
          if (labelData[i].name < 50) {
            labelData[i].itemStyle = {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#6dfbff",
                  },
                  {
                    offset: 1,
                    color: "#02aeff",
                  },
                ]),
              },
            };
          }
        }
        for (var i = 0; i < 150; ++i) {
          labelData1.push({
            value: 1,
            name: i,
            itemStyle: {
              normal: {
                color: "rgba(0,209,228,0)",
              },
            },
          });
        }
        for (var i = 0; i < labelData1.length; ++i) {
          if (labelData1[i].name < 150) {
            labelData1[i].itemStyle = {
              normal: {
                color: "#464451",
              },
            };
          }
        }

        function Pie() {
          let dataArr = [];
          for (var i = 0; i < 100; i++) {
            if (i % 10 === 0) {
              dataArr.push({
                name: (i + 1).toString(),
                value: 30,
                itemStyle: {
                  normal: {
                    color: "rgba(0,255,255,1)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)",
                  },
                },
              });
            } else {
              dataArr.push({
                name: (i + 1).toString(),
                value: 100,
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)",
                  },
                },
              });
            }
          }
          return dataArr;
        }
        let color = "rgba(255, 74, 74, 1)";
        if (this.subtext.indexOf("-") == -1) {
          color = "#3bffe6";
        } else {
          color = "rgba(255, 74, 74, 1)";
        }
        let option = {
          // backgroundColor: "#1f1e26",
          title: {
            text: this.data.allRate,
            // x: "50%",
            left: "center",
            top: this.titleTop,
            itemGap: 3,
            // textAlign: "center",
            textStyle: {
              fontSize: fontSize.fontSize(0.1),
              fontWeight: "700",
              color: "rgba(59,255,230,1)",
              textAlign: "center",
            },
            // subtext: this.data.baifenbi+'%',
            subtext: this.subtext,
            subtextStyle: {
              color: "#3bffe6",
              fontWeight: "700",
               fontSize: fontSize.fontSize(this.subtextStyleSize),
            }, // 副标题样式
          },
          graphic: {
            elements: [
              {
                type: "image",
                z: 3,
                style: {
                  image: this.img.url,
                  width: fontSize.fontSize(0.83) * this.width, //自适应大小,
                  height: fontSize.fontSize(0.83) * this.width, //自适应大小,
                },
                left: "center",
                top: "center",
              },
            ],
          },
          polar: {
            // radius: ["78%", "70%"],
            center: ["50%", "50%"],
            radius: [
              fontSize.fontSize(0.32) * this.width,
              fontSize.fontSize(0.295) * this.width,
            ],
            width: fontSize.fontSize(0.23) * this.width, //自适应大小,
            height: fontSize.fontSize(0.23) * this.width, //自适应大小,
            // hoverAnimation: false,
            center: ["50%", "50%"],
          },
          angleAxis: {
            max: 100,
            show: false,
            startAngle: 0,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: "",
              type: "bar",
              roundCap: true,
              barWidth: 60,
              showBackground: true,
              backgroundStyle: {
                color: "#265ba0",
              },
              data: [75],
              coordinateSystem: "polar",
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: "#80e6ff",
                    },
                    {
                      offset: 1,
                      color: "#669dff",
                    },
                  ]),
                  borderColor: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#7777eb",
                      },
                      {
                        offset: 1,
                        color: "#70ffac",
                      },
                    ]
                  ),
                  shadowColor: "rgba(142, 152, 241, 0.6)",
                },
              },
            },

            // {
            //   type: "pie",
            //   radius: ["69%", "70%"],
            //   center: ["50%", "50%"],
            //   data: [
            //     {
            //       hoverOffset: 1,
            //       value: 100,
            //       name: "",
            //       itemStyle: {
            //         color: "rgba(0,156,255,0.6)",
            //       },
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         normal: {
            //           smooth: true,
            //           lineStyle: {
            //             width: 0,
            //           },
            //         },
            //       },
            //       hoverAnimation: false,
            //     },
            //     {
            //       label: {
            //         show: false,
            //       },
            //       labelLine: {
            //         normal: {
            //           smooth: true,
            //           lineStyle: {
            //             width: 0,
            //           },
            //         },
            //       },
            //       value: 100 - 100,
            //       hoverAnimation: false,
            //       itemStyle: {
            //         color: "#3c3a48",
            //       },
            //     },
            //   ],
            // },
          ],
        };
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
